import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
 


 function App() {
  const [count, setCount] = useState(0);
  
  function handleClick() {
    setCount(count + 1);
  }
  function handleJSClick(){
    setCount(count - 1);
  }
  return (
    <div>
      <h1>独立更新的计数器</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
      <button onClick={handleJSClick}>减少1</button>
    </div>
  );
}
// function MyButton() {
//   return (
//     <button onClick={handleClick}>
//       点了 {count} 次
//     </button>
//   );
// }
function MyButton({ count, onClick }) {
  let content = null;
  if (count > 10) {
    content = <h1>大于10</h1>;
  } else {
    content = <h5>小于10</h5>
  }
  return (
    <button onClick={onClick}>
      点了 {count} 次{content}
    </button>
  );
}


export default App
